<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>FarmaSoft</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>

<script type="text/javascript"> 
$(document).ready(function(){
	$("#dialogo").dialog({
		autoOpen: false,
        title: "Formulario Categoria",
		height: 250,
		width: 550,
		modal: true,
		buttons: {
            "Aceptar": function() {
                var flag = $("#formPais").valid();
                if(flag){
                   $.ajax({
	                   type: 'POST',
	                   url: 'generalAdministrationAddEditCountry',
	                   data: $('#formPais').serialize(),
	                   success: function(res){
	                   location.href = "adminCountry?_menuId=2&_subMenuId=2&_optionId=1";
                   },
                   error:function(){alert("Error! al registrar la Pais")}
                   });
                   $( this ).dialog("close");
                }
            },
            Cancelar: function() {
                $( this ).dialog( "close" );
            }
	   },
	   close: function(){
          // implementar lo que convenga
	   }
	   });
       
	   // add country
       $.fn.addPais = function(){
           $('#formPais').each(function(){
               this.reset();
           });
           $("#titleForm").text("Nuevo Pais");
           $("#accion").val("0");
           $( "#dialog:ui-dialog" ).dialog( "destroy" );
           $( "#dialogo" ).dialog( "open" );
           $("#name").focus();
           $("#sigla").focus();
      }
	   
       //editar country      
       $.fn.editar = function(idCountry,name,sigla){
	       $('#formPais').each(function(){
	       	  this.reset();
	       });
	       $("#titleForm").text("Modificar Pais");
	       $("#accion").val("1");
	       $("#idCountry").val(idCountry);
	       $("#name").val(name);
	       $("#sigla").val(sigla);
	       $("#dialog:ui-dialog").dialog("destroy");
	       $("#dialogo").dialog("open");
       }
               
       // delete country
       $.fn.eliminar = function(idCountry,name,sigla){
	       if(confirm("¿Esta seguro de eliminar al pais ''"+name+"''?")){
	       	   $.ajax({
	           	  url: "generalAdministrationRemoveCountry",
	              type: "GET",
	              data:{idCountry:idCountry, name:name},
	              success:function(res){
	                 location.href = "adminCountry?_menuId=2&_subMenuId=2&_optionId=1";
	              },
	                 error: function(res){ alert("Error! al eliminar al pais esta siendo utilizado por otra persona o programa."); }
	          });
	      }
      }
       
     	//permit only text
		$('.lettersOnly').keyup(function () {
	         if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
	            this.value = this.value.replace(/[^A-Za-z\s]/g, '');
	         }
	     });
  });
            
  // muestra oculta
 function mostrarOcultar(){
    if(document.getElementById("paisesBaja").style.display == 'none'){
       document.getElementById("paisesBaja").style.display = 'block';
    }else{
       document.getElementById("paisesBaja").style.display = 'none';
    }
 }      
</script>
</head>

<body>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="mainFront?v=1">Home</a></li>
                    <li><span style="color:#666">Administraci&oacute;n</span></li>
                    <li><span style="color:#666">Administraci&oacute;n General</span></li>
                    <li class="current-page"><span class="end"><span class="middle">Administraci&oacute;n de Ciudad</span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                
                <div class="izq">
						<%@include file="../../../bodyIzq.jsp" %>
                </div>
                
                <div class="medio" style="border: 0px solid">
                   <center>
                   <h2 class="decorado">Lista de Paises</h2></br></br> 
                   
                   <table class="miReporte" style="width: 80%">
	                   <tr>
	                        <td style="text-align: right"><input type="button" class="boton" value="Anadir Nuevo Pais" onclick="$.fn.addPais()"/></td>
	                   </tr>
	               </table>
	               <table class="tabla_decorado" style="width: 80%">
	                   <thead>
	                         <tr>
	                             <th width="5%" class="th_decoradoRowspan">Nº</th>
                                 <th width="40%" class="th_decoradoRowspan">NOMBRE</th>
                                 <th width="25%" class="th_decoradoRowspan">SIGLA</th>
                                 <th width="30%" class="th_decoradoRowspan">ACCIONES</th>
	                         </tr>
	                   </thead>
	                   <tbody>
                  	    	<c:set var="i" value="1"/>
							<c:forEach var="item" items="${contries}">
						       <tr class="tr_decorado">
	                               <td class="th_decorado" style="text-align: center">${i}</td>
	                               <td class="th_decorado">${item.name}</td>	
	                               <td class="th_decorado">${item.initials}</td>
	                               <td class="td_decoradoDerecha" style="text-align: center">
	                               		<input type="button" value="Editar" onclick="$.fn.editar(${item.countryId},'${item.name}','${item.initials}')" class="botonRep" title="Pulsa aqui para editar la localidad"/>	                          
	                               		<input type="button" value="Eliminar" onClick="$.fn.eliminar(${item.countryId},'${item.name}','${item.initials}')" class="botonRep" title="Pulsa aqui para eliminar la localidad"/>
	                               </td>
	                            </tr>
	                            <c:set var="i" value="${i+1}"/>
					    	</c:forEach>
                     	</tbody>
                     	
	                 </table>
	                 <div id="dialogo"><br/>
                        <h2 class="decorado" id="titleForm"></h2><br/>
                     	<form id="formPais" method="POST">
                        	
                            <input type="hidden" name="accion" id="accion" value="0" />
                            <input type="hidden" name="idCountry" id="idCountry" value="0" />
                            
                            <div class="error" style="clear:left;text-align:center;"><span></span></div>
                            <div style="clear:both;">
	                            <label class="form_align35" >Nombre: </label>
	                            <input type="text" name="name" id="name" value="" class="required form_input_align lettersOnly" title="Ingrese Nombre" maxlength="40" placeholder="letras"/>
	                            <label class="error">*</label>
                         	</div>
                            <div style="clear:both;">
                                <label class="form_align35" >Sigla: </label>
                                <input type="text" name="sigla" id="sigla" value="" class="form_input_align lettersOnly" title="Ingrese Sigla" maxlength="5" placeholder="letras"/>
                            </div>
                          </form>
                       </div>
	                 </center>                         
                </div>
                
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!--end main content -->
	</div>
</div>
</body>
</html>
